<app-log-out></app-log-out>
<nz-layout class="main-layout">
  <nz-sider
    class="custom-sider"
    [nzTheme]="'light'"
    [nzTrigger]="null"
  >
    <div class="sider-header">
      <a nz-icon nzType="book" nzTheme="outline"></a>
      <span class="sider-title">章节索引</span>
    </div>

    <nz-list class="index-list" [nzDataSource]="siderIndexList" [nzRenderItem]="indexItem">
      <ng-template #indexItem let-index>
        <nz-list-item
          class="index-item"
          [class.active]="activeIndexId === index.id"
          (click)="scrollToSection(index.id)"
        >
          <!-- 当前选中时显示 -->
          <span *ngIf="activeIndexId === index.id" style="color:cornflowerblue">
            {{ index.name }}
          </span>

          <!-- 未选中时的索引项 -->
          <span *ngIf="activeIndexId !== index.id">{{ index.name }}</span>
        </nz-list-item>
      </ng-template>
    </nz-list>
  </nz-sider>

  <nz-content class="content-main" #contentMain>
    <div class="content-title">
      <h1>第四章 线性方程式</h1>
      <p>总体介绍此项目的作用</p>
    </div>

    <!-- 各章节内容（省略，与之前相同） -->
    <section id="section1" class="content-section">...</section>
    <section id="section2" class="content-section">...</section>
    <!-- ...其他章节 -->
  </nz-content>
</nz-layout>

